<!--
  上传组件（向后端服务器获取表单形式， 直传到oss）

  @author will
  @site https://pt.jdyd.xyz
  @date 2022/01/14 12:14
-->
<template>
  <div style="">
    <!-- 上传图片，图片压缩，不能使用 :action, 使用 :customRequest-->
    <!-- :action="vdata.action"  :customRequest="uploadImage" -->
    <a-upload
      v-model:fileList="vdata.fileList"
      :action="vdata.action"
      name="file"
      :beforeUpload="beforeUploadFunc"
      :headers="vdata.headers"
      :data="vdata.formParams"
      list-type="text"
      :showUploadList="props.showUploadList"
      :multiple="false"
      :accept="vdata.accept"
      :disabled="props.disabled"
      @preview="previewFileFunc"
      @change="handleChange"
    >
      <slot v-if=" !props.showUploadList || vdata.fileList.length <= 0" name="uploadBtn">
        <!-- <div class="ant-upload-list ant-upload-list-picture" style="cursor: pointer;">
          <span><div class="ant-upload-list-item ant-upload-list-item-undefined ant-upload-list-item-list-type-picture" style="padding-top: 20px;margin: 0;"><upload-outlined />上传</div></span>
        </div> -->
        <a-button v-if="props.isTrue" type="primary" style="margin: 0" @click="toLeadInto">
          <plus-outlined />导入商户
        </a-button>
        <a v-if="!props.isTrue" href="javascript:;">上传文件</a>
      </slot>
      <template #itemRender="{ file, actions }">
        <slot name="itemRender" :file="file" :actions="actions">
          <div class="ant-upload-list-item ant-upload-list-item-undefined ant-upload-list-item-list-type-picture" style="display: flex;align-items: center;gap: 8px;margin-top: 0;">
            <!-- <img @click="actions.preview" :src="file.url" alt="{{ file.name }}" style="width: 48px;cursor: pointer;"/> -->
            <a :href="file.url" :style="file.status === 'error' ? 'color: red' : 'color: #1890ff'" style="flex-grow: 1;cursor: pointer;">{{ file.name }}</a>
            <a href="javascript:;" @click="actions.remove"><delete-outlined :style="{ color: 'rgba(0,0,0,0.45)'}" /></a>
          </div>
        </slot>
      </template>
    </a-upload>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import appConfig from '@/config/appConfig'
import storage from '@/utils/gzStorageWrapper'
import { reactive,defineProps, getCurrentInstance, onMounted, watch } from 'vue'
import {req /* $orcScan */} from '@/api/manage'
import {$getUploadFormParams,} from '@/api/components/GzUploadExe/index'
import { sm4DecryptByResData } from '@/utils/encryptUtil'
import { shrinkImage } from 'shrinkpng'
import { config } from 'process'
import { nextTick } from 'process'
const { $infoBox, $viewerApi } = getCurrentInstance()!.appContext.config.globalProperties

// 定义 父组件传参
const props = defineProps ({
    showUploadList: { type: Boolean, default: true }, // 是否显示上传的列表， 一般都需要显示，  比如头像需要自定义的话那么则不需要显示，并且按钮常显
    src: { type: String, default: '' }, // 双向绑定  文件地址
    bizType: { type: String, default : ''}, // 业务类型
    fileType: { type: String, default: 'file' }, // img or file 
    accept: { type: String, default: null }, // 上传文件的accept
    uploadMode: {type: String, default: 'formRedirect'}, // 上传方式： formRedirect 先获取form表单地址直传oss,  file：上上传到本地后端服务器在上传到oss方式。
    // ocrType: {type: String, default: null }, // orc类型如果存在值则上传成功后自动调起ORC识别功能
    disabled: { type: Boolean, default: false }, // 是否禁用
    size: { type: Number, default: 20 }, // 图片限制大小,单位M
    isTrue:{type:Boolean,default:false},
    isNeedImport: { type: Boolean, default: true }, // 是否需要导入商户
    isShowToast: { type: Boolean, default: true }, // 是否显示成功toast
})

  // 父组件通讯函数
const emit = defineEmits(['update:src', 'change', 'ocrScan','sendData','updateValue'])

// 定义响应式数据 
const vdata : any = reactive({
    action: '',  // 文件form表单请求地址 
    fileList: [], // 全部文件集合
    formParams: {}, // 上传参数
    headers: {}, // 放入token
    formReqFileUrl: '', // 第一次的form请求的图片数据， 如果存在则使用该地址， 否则使用文件上传的响应地址。 
    accept: null, //上传文件的accept

    ysFile:null,
    errMsg:''//错误信息
})

onMounted(() => {
 if(props.src){
   vdata.fileList = [{ url: props.src, name: getFileName(props.src) }]
 }
 
 // 处理 accept
 if(!props.accept && props.fileType == 'xls'){
    vdata.accept = 'xls/*' // 所有的图片格式
 }else{
   vdata.accept = props.accept
 }
})

// // 监听变化
watch( () => props.src ,(newVal, oldVal)=>{
  if (newVal) {
    vdata.fileList = [{ url: newVal, name: getFileName(newVal) }]
  }else{
   vdata.fileList = []
  }
})

function getFileName(name){
  if(!name){
    return name
  }
  return name.substring(name.lastIndexOf('/') + 1)
}

  // 上传回调
function handleChange (info) {
    if (info.file.status !== 'uploading') {
  }
  if (info.file.status === 'done') {
    if(props.isShowToast){
      // $infoBox.message.success(`${info.file.name} 上传成功`)
    }
    emit('sendData',vdata.formReqFileUrl)
      console.log('上传的文件地址',props.isNeedImport)
    if(props.isNeedImport){
              if(vdata.formReqFileUrl){
              
                
          emit('updateValue',vdata.formReqFileUrl )
        }
      // return $apiMchInfoImport({ossFileUrl:vdata.formReqFileUrl}).then(res=>{}).catch(
      //   err=>{
      //     console.log(err)
      //     vdata.errMsg = err.msg
      //   }
      // )
      // return req.downloadTemplate('/api/mchInfo/import',{ossFileUrl:vdata.formReqFileUrl}).then(res=>{}).catch(
      //   err=>{
      //     console.log(err)
      //     vdata.errMsg = err.msg
      //   }
      // )
    }
  } else if (info.file.status === 'error') {
    $infoBox.message.error(`${info.file.name} 上传失败`)
  }

}
// 上传文件前的校验
async function beforeUploadFunc (file) {
  // console.log(111,file)
  // console.log(222,file.type)
  // 校验文件的大小
  if(file && file.size  > props.size * 1024 * 1024){
    var msg = '单个文件请不超过' + props.size + 'MB'
    $infoBox.message.error(msg)
    return false
  }
    if(props.uploadMode == 'formRedirect'){ // form表单方式 
    // 请求获取form参数 
    return $getUploadFormParams(file, 'upload').then(res => {
      console.log(5555,res.ossFileUrl)
        vdata.action = res.formActionUrl // action 
        vdata.formParams = res.formParams //表单组件 
        vdata.formReqFileUrl = res.ossFileUrl
        // console.log(res,'地址信息88888888')
        // if(vdata.formReqFileUrl){
        //   emit('updateValue',vdata.formReqFileUrl )
        // }
        // $apiMchInfoImport({ossFileUrl:res.ossFileUrl}).then(res=>{
        //   console.log(res,'5555555555555555')
        // })
    })
    }


  }


</script>
<style scoped lang="less">

/deep/ .ant-upload-list-item-name {
  flex: auto !important
}

</style>